/* eslint-disable */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Row, Col, Input, Checkbox, message, Button, Icon} from 'antd';
import request from '../../utils/request';
import config from '../../config';
// import md5 from 'blueimp-md5';
import PublicService from '../../services/PublicService';
import styles from './login.less';

class Login extends Component {

  state = {
    enter: false,
    user: '',
    pwd: '',
    code: '',
    codeImg: '',
    autoLogin: false,
    loading: false,
    codeUrl: '/hh-management-web/hehui/login/getSignCode?t=',
    inputType: 'password'
  };

  componentDidMount () {
    let t = this;
    t.refreshCode();
    PublicService.clearCookie('nickName');
    // 获取自动登录ID
    let autoLoginId = PublicService.getCookie('rememberMeId');
    // 自动登录ID存在 则自动登录
    if (autoLoginId) {
      t.setState({
        autoLogin: true,
      });
      request({
        url: '/hh-management-web/hehui/login/login',
        method: 'POST',
        data: {
          rememberMeId: autoLoginId,
          rememberMe: true
        }
      }).then(
        data => {
          console.log(data, 'data');
          t.checkLogin(data);
        }
      );
    }
  }


  // input change事件
  getUserInfo (inputIndex, e) {
    let t = this;
    if (inputIndex === 'autoLogin') {
      t.setState({
        autoLogin: e.target.checked
      })
    } else {
      t.setState({
        [inputIndex]: e.target.value.trim()
      });
    }
  }

  // 登录按钮
  login () {
    console.log(this)
   
    let t = this;
    t.props.history.push({pathname: '/App/BackTarget'});
    return;
    if (typeof(Storage) !== "undefined") {
      sessionStorage.SZHJ = 'menu-list';
      sessionStorage.JSZX = 'menu-list';
      sessionStorage.XFGC = 'menu-list';
    } else {
      message.warning('您的浏览器版本过低');
    }
    // 判断输入框是否为空
    if (!t.state.user) {
      message.warning('用户名不能为空');
      return;
    }
    if (!t.state.pwd) {
      message.warning('密码不能为空');
      return;
    }
    if (!t.state.code) {
      message.warning('验证码不能为空');
      return;
    }
    // PublicService.fullScreen(document.documentElement);
    t.setState({
      loading: true
    });
    let params = {
      // password: md5(t.state.pwd),
      userName: t.state.user,
      v_verifyCode: t.state.code,
      rememberMe: t.state.autoLogin
    };
    request({url: '/hh-management-web/hehui/login/login', method: 'POST', data:params}).then(
      (data) => {
        console.log(document.cookie, '接口后cookie');
        t.checkLogin(data);
      }
    ).catch(() => {
      message.warning('登录失败');
      t.setState({
        loading: false
      });
    })
  }

  // 判断是否登录成功
  checkLogin (data) {
    let t = this;
    t.setState({
      loading: false
    });
    t.refreshCode();
    if (data.rc === 1) {
      document.exitFullscreen ? document.exitFullscreen() :
        document.mozCancelFullScreen ? document.mozCancelFullScreen() :
          document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
      message.warning(data.err);
    } else {
      // 保存用户登录信息
      // t.props.dispatch({type: 'login/saveUser', payload: {user: data.ret}});
      PublicService.setCookie('userId', data.ret.id);
      PublicService.setCookie('userName', data.ret.userName);
      PublicService.setCookie('nickName', data.ret.name);
      message.success('登录成功');
      
    }
  }

  // 刷新验证码
  refreshCode () {
    let t = this;
    t.setState({
      codeUrl: t.state.codeUrl + new Date().getTime()
    });
  }

  // 显示密码
  pwdShow () {
    let t = this;
    t.setState({
      inputType: t.state.inputType.length === 0 ? 'password' : ''
    })
  }

  // 键盘事件
  keyUp(e){
    let t = this;
    let code = e.charCode || e.keyCode;  //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的却是charCode)
    if (code === 13) {
      t.login();
    }
  }

  onshaoxing = () => {
    window.location.href = 'http://www.zjsxpug.com/'
  }


  render () {
    let t = this;
    let { loading } = t.state;
    return (
      <div className={styles["bg"]} onKeyUp={(e) => t.keyUp(e)}>
        <div className={styles.titlebox}>
          <div style={{borderRadius:'50%',display:'flex',overflow:'hidden',width:64,height:65,alignItems:'center',justifyContent:'center'}}>
          <img src={require("../../assets/sxlogo.png")} style={{ width: 70, height: 70, opacity: 1 }} />
          </div>
         
          <div className={styles.text}>
            绍兴环境生产运行集成监管系统
            {/* <span onClick={this.onbackcc}>跳过登录</span> */}
          
          </div>

        </div>

        <div className={styles.bottombox}>
            <div className={styles.bottomBox_text}>版权所有 : 绍兴市环境产业有限公司</div>
            
            <div className={styles.bottomBox_text}>技术支持 : 苏州市伏泰信息科技股份有限公司</div>
            <div onClick={this.onshaoxing} className={styles.bottomBox_text} style={{cursor:'pointer' ,color:'blue'}}>链接 : 绍兴公用事业集团</div>
        </div>

        {/* <img src={bjt} alt="" className={styles["zz"]} onClick={this.tu} ref="tu" id="tu"/> */}
        <div className={styles['wp-content']}>

          <div className={styles['wp-right']}>
            <div className={styles.clire}>
              <img src={require("../../assets/zf.png")} style={{ width: '8vh', height: '8vh', opacity: 1 }} />
            </div>
            <div>
              <p className={styles.titleText}>用户名 : </p>
              <Input   className={styles.item_name} value={t.state.user} onChange={t.getUserInfo.bind(t, 'user')} />
            </div>
            <div>
              <p className={styles.titleText}>密&nbsp;&nbsp;&nbsp;码 : </p>
              <Input.Password  size="small" type={t.state.inputType} className={styles.item_name} onChange={t.getUserInfo.bind(t, 'pwd')} />
            </div>



            <div className={styles.codel}>
              <div onClick={t.render.bind(t)} className={styles.boxice}>
                <p className={styles.titleText}>验证码 : </p>
                <img style={{ height: '4vh', width: '80%' }} onClick={t.refreshCode.bind(t)} src={t.state.codeUrl} />
              </div>
              <div className={styles.boxice}>
                <p>&nbsp;&nbsp;&nbsp;</p>
                <Input
               
                  className={styles.item_name}
                  // style={{ width: 100 }}
                  style={{ marginBottom: 0,height:'4vh',paddingLeft:'4%',boxSizing:'border-box' }}
                  // className={styles['wp-login-yanzheng']}
                  placeholder="验证码"
                  onChange={t.getUserInfo.bind(t, 'code')} />

              </div>

            </div>


            <div
              onClick={t.login.bind(t)}
              className={styles['wp-login-btn']}
            >
              登录
                </div>
          </div>
          {
            loading &&
            <div className={styles['wp-loading']}></div>
          }
        </div>
      </div>
    );
  }
}

function mapStateToProps (state) {
  return {};
}

export default connect(mapStateToProps)(Login);


